CSS 弹性盒子布局
撰写时间： 2019-09-27 总共： 1590 字 转载请注明： BY-SA 4.0（除特别声明或转载文章外）
资料来源
阮老师的几个博文介绍：
包括前端日刊的介绍：
容器属性
/* 决定排列方向 */
flex-direction
/* 决定是否换行和换行的方式 */
flex-wrap
/* 决定子元素水平对齐方式 */
justify-content
align-items
align-content
/* 方向, 换行 简写方式 */
flex-flow: row nowrap;
项目属性
/* 排列顺序 */
order
/* 定义元素的放大占据空间 */
flex-grow
/* 定义元素的缩小占据空间 */
flex-shrink
/* 设置占据水平空间 */
flex-basis
/* 对齐方式 */
align-self
/* 放大，缩小，占据空间 简写 */
flex:[auto(1 1 auto ),none(0 0 auto)];
使用
就说说吧：
<div class="login">
<form id="login-form">
<h2>登录</h2>
<input type="text" placeholder="登录帐号" required/>
<input type="password" placeholder="登录密码" required/>
<input type="submit" value="登录"/>
</form>
</div>
css：
/* login */
.login,.register{
display: flex;
display: -webkit-flex;
justify-content: center;
}
#login-form{
background: #fff;
position:absolute;
border: none;
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
margin-top: 100px;
width: 400px;
background-color: white;
border: 1px solid #E0E0E0;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
border-radius: 5px;
text-align: center;
}
input{
border: 1px solid #0A6998;
border-radius: 5px;
padding: 10px;
margin: 20px auto;
width: 250px;
}
input[type='submit']{
background-color: #4a77d4;
color: white;
font-weight: bold;
font-size: 16px;
width: 270px;
}
input[type='submit']:hover{
background-color: #3a67C4;
}
input[type='submit']:active{
background-color: #33cc99;
border: 1px solid #33cc99;
}
以上总共有2个flex容器
整个外部login div 是一个flex容器，实现一个居中的登录表单。
只需要指定：justify-content: center; 即可实现表单的居中。
登录表单也是一个flex容器，那么input元素就是他的项目了。
我们不必指定他的flex属性，指定他的宽度就ok了。
flex-direction: column; flex-wrap: wrap; justify-content: center;
根据表单的居中对齐。
还有在列表里使用，让列表项自动排列。在不同的设备宽度弹性盒子有妙用。
等等。
